<template>
  <div>
    <SearchTable
      :formItems="formItems"
      :columns="columns"
      :api="list"
      :fixParams="fixParams"
      :rules="searchRules"
      ref="table"
    >
      <template #action="{ text, record }">
        <a-popconfirm :title="`确定 核销 吗？`" @confirm="updateHx(record)">
          <a>核销</a>
        </a-popconfirm>
      </template>
    </SearchTable>
  </div>
</template>

<script>
  import { ref, toRefs, reactive } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { message } from 'ant-design-vue';
  import { formItems, searchRules, columns } from './config';
  import { list, hx } from './api';

  export default {
    data() {
      return {
        list,
        formItems,
        searchRules,
        columns,
      };
    },
    setup(props, context) {
      const table = ref(null);
      const route = useRoute();
      const state = reactive({
        fixParams: {
          activity_id: Number(route.params.id),
        },
      });

      const updateHx = (record) => {
        hx({
          id: record.id,
        }).then((res) => {
          message.success('操作成功');
        });
      };

      return {
        ...toRefs(state),
        updateHx,
        table,
      };
    },
  };
</script>
